<template>
  <div class="title">
    <div class="title-name">{{$route.meta.title}}</div>
    <div class="title-icon">
      <i class="iconfont iconhelp" @click="preview"></i>
    </div>
  </div>
</template>
<script>
export default {
  name: 'aTitle',
  data () {
    return {
      title: ''
    }
  },
  mounted () {
    this.title = this.$route.meta.title
  },
  methods: {
    preview () {
      this.$emit('clickPreview')
    }
  }
}
</script>
<style lang="scss" scoped>
// .title {
//   height: 30px;
//   width: 100%;
//   display: flex;
//   // align-items: center;
//   border-bottom: 1px solid #dfe6ec;
//   font-size: 16px;
//   font-weight: 600;
//   margin-bottom: 20px;
//   .title-name {
//     width: 200px;
//   }
// }

.title {
  height: 30px;
  width: 100%;
  display: flex;
  // align-items: center;
  border-bottom: 1px solid #dfe6ec;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
  .title-name {
    width: 200px;
    font-size: 14px;
  }
  .title-icon {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    cursor: pointer;
    .iconhelp {
      font-size: 18px;
    }
  }
}
</style>